<script type="text/javascript">

	if ("${errmsg}" != '') {
		alert("${errmsg}");
	}
</script>

<html>
<head>
<base href="<=basePath>">

<title>我的购物车</title>

<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<!--<script src="/js/jquery.js"></script>-->

	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script type="text/javascript">
	/* 加减商品数量 */
	$("[name=jian]").live("click",function(){
		alert("jian");
		var numstr = $(this).next("input").val();
		alert(numstr);
		if(numstr!="1"){
			$(this).next("input").val(parseInt(numstr)-1);
		}
	});
	$("[name=jia]").live("click",function(){
		var numstr = $(this).prev("input").val();
		$(this).prev("input").val(parseInt(numstr)+1);
		
	});
	/* 删除商品 */
	function dropconfirm(pid){
		var op = confirm("确定要删除该商品吗？");
		if(op == true){
			$.ajax({
				type : "post",
				url : "productServlet?type=dropcar",
				data : "&pid=" + pid,
				datetype : "text",
				//请求成功后调用
				success : function() {
					alert("删除成功");
					window.location.reload();
				},
				//请求失败后调用
				error : function() {
					alert("删除失败");
				}
			});
		}
	}
</script>

<style type="text/css">
a {text-decoration: none;color: black;}
a:hover {color: #FF7E00;}
/* 顶部菜单导航栏 */
#topbar {background-color: #3B3B3B;width: 1890px;height: 40px;}
.sep {color: #3B3B3B}
#topbar a {text-decoration: none;color: #BDBDBD;font-family: 黑体;font-size: 14px;}
#topbar a:hover {color: white;}
#topbar_left {width: 700px;margin-left: 350px;padding-top: 10px;float: left;}
#topbar_right {width: 400px;margin-left: 1300px;padding-top: 10px;}
/* 我的购物车 */
#car_title {background-color: white;width: 1890px;height: 95px;}
#logo {float: left;width: 60px;margin-left: 350px;padding-top: 20px;}
#car_text {width: 700px;margin-left: 500px;padding-top: 30px;}
#hr {height: 2px;border: none;border-top: 2px solid #FF7E00;margin-top: 25px;}
#jiesuan {background-color: white;width: 1226px;height: 100px;margin-left: 350px;}
#jiesuan a {text-decoration: none;font-family: 黑体;font-size: 20px;color: black;}
#jiesuan a:hover {color: #FF7E00;}
#jiesuan_left {width: 400px;padding-top: 25px;margin-left: 40px;float: left;}
#jiesuan_right {width: 400px;height: 40px;margin-left: 650px;padding-top: 25px;}
#total_span {color: #FF7E00;}
#total_num {font-size: 40px;}
#carshop {background-color: white;width: 1226px;margin-left: 350px;}
#carshop hr {border: 1px solid #EDEDED;}
/* 尾部 */
#foot {width: 1890px;}
</style>
</head>
<script type="text/javascript">	
	if ("${msg}" != '') {
		alert("${msg}");
	}	
</script>

<body style=" background-color: #EDEDED; font-family: 黑体; ">
	<div id="app">
		<!-- 顶部菜单导航栏 -->
		<div id="header">
			<div id="topbar">
				<div id="topbar_left">
					<a href="/prod/show5.action">小米商城</a><span class="sep">|</span>
					<a href="" target="_blank">MIUI</a><span class="sep">|</span>
					<a href="" target="_blank">米聊</a><span class="sep">|</span>
					<a href="" target="_blank">游戏</a><span class="sep">|</span>
					<a href="" target="_blank">多看阅读</a><span class="sep">|</span>
					<a href="" target="_blank">云服务</a><span class="sep">|</span>
					<a href="" target="_blank">金融</a><span class="sep">|</span>
					<a href="" target="_blank">米币</a><span class="sep">|</span>
					<a href="" target="_blank">手机版</a><span class="sep">|</span>
					<a href="" target="_blank">问题反馈</a>
				</div>
				<div id="topbar_right">
					<c:if test="${empty user }">
						<a href="${(pageContext.request.contextPath)}/login.jsp">登陆</a>
						<span class="sep">|</span>
					</c:if>
					<c:if test="${not empty user }">
						<a href="">${user.uname}</a>
						<span class="sep">|</span>
						<a href="/fore/logout.action">注销</a>
						<span class="sep">|</span>
						<a href="/fore/showOrder.action" target="_blank">我的订单</a>
						<span class="sep">|</span>
						<a href="/fore/showCarShop.action" target="_blank">购物车</a>
						<span class="sep">|</span>
					</c:if>
					<a href="register.jsp" target="_blank">注册</a><span class="sep">|</span>
				</div>
			</div>
		</div>

		<!-- 我的购物车 -->
		<div id="car_title">
			<div id="logo">
				<a href="">
					<img alt="" src="image/milogo.jpg"
						 onmouseover="this.src='${(pageContext.request.contextPath)}/image/milogo2.jpg'"
						 onmouseout="this.src='${(pageContext.request.contextPath)}/image/milogo.jpg'">
				</a>
			</div>
			<div id="car_text">
				<span style="font-family: 黑体;font-size: 34px;">我的购物车</span>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<span style="font-family: 黑体;font-size: 16px;">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
			</div>
			<hr id="hr">
		</div>
		<br>


			<div id="allcarshop">
				<div id="carshop">
					<br>
					<table border="0px" width="1200" style="text-align: center;">
						<tr>
							<td>图片</td>
							<td>名称</td>
							<td>型号</td>
							<td>单价</td>
							<td>数量</td>
							<td>小计</td>
							<td>操作</td>
						</tr>
							<tr>
								<td colspan="7"><hr></td>
							</tr>
							<tr style="font-size: 18px;" v-for="product in products">
								<td width="300" height="150">

									<a href="">
										<img alt="" :src="'/image/'+product.pImage" style="height: 150px;"></a>
								</td>
								<td width="100" >
									{{product.pName}}</td>
								<td width="400">
									{{product.pContent}}</td>
								<td width="100">{{product.pPrice}}</td>
								<td width="210">
									<input type="text" readonly="readonly" value="1" style="width: 40px; height: 30px; line-height: 30px;border: 0px;text-align: center;font-size: 26px;color:#FF7E00 "/>
								</td>
								<td width="200" style="color: #FF7E00;">{{product.pPrice}}元</td>
								<td width="100">
									<a href="${(pageContext.request.contextPath)}/fore/delete.action?cid=${car.cid}" onclick="return confirm('确定删除吗？')" style="display: block; background-color: #EDEDED;width: 100px; height: 40px; line-height: 40px;"
									   onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='#EDEDED';">
										删除</a></td>
							</tr>
					</table>
				</div>
				<br>

				<script type="text/javascript">
                    function changeN(cid,num) {

                        $.ajax({
                            type : "post",
                            url : "/fore/changeNumber.action",
                            data:"cid="+cid+"&num="+num,
                            success : function() {
                                $("#allcarshop").load("http://localhost:8080/ssmxiaomi202206_war_exploded/fore/showCarShop.action");

                            }
                        });

                    }
				</script>

				<!-- 结算栏 -->
				<div id="jiesuan">
					<div id="jiesuan_left">
						<a href="/index.jsp" style="display: block; width: 150px; height: 50px; line-height: 50px; background-color: #FF7E00; font-size: 20px; text-align: center;"
						   onmouseover="this.style.color='white';"
						   onmouseout="this.style.color='black';">
							继续购物</a>
					</div>
					<div id="jiesuan_right">
						<span>活动优惠：减0元&nbsp;&nbsp;</span>
						<span id="total_span">合计：
			<span id="total_num"></span> {{total}} 元&nbsp;&nbsp;&nbsp;
			</span>
						<div style="position: absolute;margin-left: 350px; margin-top: -45px;">
							<a href="jiesuan.html" style="margin-top:25px ;display: block; width: 200px; height: 50px; line-height: 50px; background-color: #FF7E00; font-size: 26px; text-align: center;"
							   onmouseover="this.style.color='white';"
							   onmouseout="this.style.color='black';">
								去结算 </a>
						</div>
					</div>
				</div>


			<center><h2>购物车为空</h2>
				<a href="/index.jsp" style="display: block; width: 150px; height: 50px; line-height: 50px; background-color: #FF7E00; font-size: 20px; text-align: center;"
				   onmouseover="this.style.color='white';"
				   onmouseout="this.style.color='black';">
					继续购物</a>
			</center>


		<br>
		<br>
		<br>

		<div>
			<img alt="" src="image/carshop_tj.jpg" width="1890px;">
		</div>

		<!-- 尾部 -->
		<div id="foot">
			<img alt="" src="image/foot.jpg" width="1890px;">
		</div>

	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script>
        new Vue({
            el: "#app",
            data:{
				products:[],
				total: 0.0
            },
            methods:{

            },
            created(){
             	//1.发送请求,查询当前用户的购物车
				axios({
					method: "GET",
					url: "findCartShop"
				}).then(resp=>{
					if (resp.data.code == 200){
					    this.products = resp.data.data;
					    //计算一下总价格
						this.products.forEach((p)=>{
						    this.total += p.pPrice;
						})
					    console.log(this.products)
					}
				})
            }
        })
	</script>
</body>
</html>
